<script setup lang="ts">
import MainCenter from '@/layout/MainCenter/index.vue'
import moment from 'moment'
import {ref} from 'vue'
moment.locale('zh-cn')
const startDate = moment("2023-10-18");

// 计算时间间隔并格式化
function formatElapsedTime(startDate:any) {
    var now = moment(); // 获取当前时间
    var duration = moment.duration(now.diff(startDate)); // 计算时间间隔
    var days = Math.floor(duration.asDays()); // 获取天数
    var hours = duration.hours(); // 获取小时数
    var minutes = duration.minutes(); // 获取分钟数
    var seconds = duration.seconds(); // 获取秒数
    
    return days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒";
}

let elapsedTime = ref('')
elapsedTime.value = formatElapsedTime(startDate);
// 在定时器中更新显示
function updateDisplay() {
    elapsedTime.value = formatElapsedTime(startDate);
}
// 每秒更新一次显示
setInterval(updateDisplay, 1000);


</script>

<template>
    <div class="footer-box">
        <MainCenter class="footer-row">
            <div class="footer-content">
                <p>
                    @<span>黄粱一梦的博客</span>
                </p>
                <p style="margin: 10px auto;">网站已经运行{{ elapsedTime }}</p>
                <h2>备案号:
                    <a href="https://beian.miit.gov.cn/#/Integrated/index">豫ICP备2022014268号-1</a>
                </h2>
            </div>
        </MainCenter>
    </div>
</template>


<style lang="scss" scoped>
.footer-box {
    width: 100%;
    // padding: 1.5rem;
    background: #fff;
    .footer-row {
        padding: 0px;
        margin: 0 auto;
        background: #fff;
        .footer-content {
            text-align: center;
        }
    }
    .home-content {
        background: #fff !important;
    }
}
</style>